昨天說明了 SyncETA Lite 想解決的問題,今天來談談我們的技術選型:為什麼是 PWA(Progressive Web App,漸進式網頁應用),而不是原生 App?
PWA 的三個關鍵優勢
-
免上架、免審核: 原生 App 要上架 App Store / Google Play,審核往往要好幾天,對於一個實驗性、快速迭代的專案來說太慢。PWA 只要一個網址就能使用。
-
可安裝到主畫面: 使用者在瀏覽器打開網頁後,可以選擇「加入主畫面」,之後就像原生 App 一樣有獨立圖示、全螢幕體驗,不會有瀏覽器網址列。
-
離線能力: 透過 Service Worker,PWA 可以快取資料,在網路不穩定時仍提供部分功能(例如上次查詢過的路線資訊)。這對「通勤」情境特別重要,因為捷運地下化路段訊號常常不穩定。
PWA vs 原生 App vs 一般網頁
| 特性 |
一般網頁 |
PWA |
原生App |
| 需要上架 |
否 |
否 |
是 |
| 可安裝到主畫面 |
否 |
是 |
是 |
| 離線使用 |
否 |
是(部分) |
是 |
| 推播通知 |
否 |
是 |
是 |
| 開發成本 |
低 |
中 |
高 |
對於一個學生專案/研究原型來說,PWA 是甜蜜點:開發成本接近網頁,但體驗接近原生 App。這也是我在做碩論相關系統時選擇 PWA 的原因之一——降低受測者的安裝門檻,對使用者研究招募也很友善。
今天的小結
PWA 本質上就是一個「加了三樣東西」的網頁:
-
HTTPS: 安全連線是 PWA 的基本要求。
-
Web App Manifest: 一個 JSON 檔案,描述你的 App 名稱、圖示、啟動畫面等。
-
Service Worker: 一段在瀏覽器背景執行的 JavaScript,負責快取、離線、推播等能力。
明天我們就要動手,把開發環境建起來,並規劃好整個 syncetalite-pwa/ 專案的資料夾結構。